<template>
    <div class="app-container">
        <el-card shadow="always">
            <el-form :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="所属区县：" prop="county">
                    <el-select v-model="queryParams.county" placeholder="请选择所属区县" clearable style="width: 240px">
                        <el-option v-for="dict in nhp_county_type_short" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="序列号:">
                    <el-input v-model="queryParams.serialNumber" clearable placeholder="请输入序列号" style="width: 240px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="listHardwareInfoList">查询</el-button>
                    <el-button @click="unsetQueryForm"><el-icon>
                            <RefreshRight />
                        </el-icon>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 10px;min-height: 500px;padding-bottom: 3px;">
            <el-row>
                <el-button type="primary" icon="Upload" @click="uploadOssData">导入</el-button>
            </el-row>
            <div id="table" style="margin-top: 20px;">
                <el-table v-loading="loading" ref="hardwareInfoTable" :data="hardwareInfoTableData" style="width: 100%">
                    <el-table-column prop="county" label="区县" width="120" align="center" fixed />
                    <el-table-column prop="serialNumber" label="序列号" width="120" align="center" fixed />
                    <el-table-column prop="vendorUnitTypeNumber" label="资产单元编号" width="180" align="center" fixed />
                    <el-table-column prop="shortName" label="简称" width="150" align="center" show-overflow-tooltip />
                    <el-table-column prop="classification" label="类型" width="150" align="center" />
                    <el-table-column prop="manufacturer" label="厂商" width="120" align="center" />
                    <el-table-column prop="hardware" label="硬件设备" width="120" align="center" />
                    <el-table-column prop="network" label="网络类型" width="120" align="center" />
                    <el-table-column prop="userLabelOriginal" label="UserLabel_原始" width="200" align="center" />
                    <el-table-column prop="userLabelLatest" label="UserLabel_最新" width="200" align="center" />
                    <el-table-column prop="networkAccessType" label="入网类型" width="120" align="center" />
                    <el-table-column prop="lastNetworkAccessTime" label="上次入网日期" width="150" align="center" />
                    <el-table-column prop="lastNetworkExitTime" label="上次退网日期" width="150" align="center" />
                    <el-table-column prop="updateTime" label="变更日期" width="120" align="center" />
                    <el-table-column prop="changeTimes" label="变更次数" width="150" align="center" />
                    <el-table-column prop="nbId" label="NBId" width="200" align="center" />
                    <el-table-column fixed="right" label="操作" min-width="120" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small"
                                @click="showDetailDialog(scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next" :total="total"
                    @size-change="listHardwareInfoList" @current-change="listHardwareInfoList" /> -->
                <pagination v-show="total > 0" :total="total" v-model:page="currentPage" v-model:limit="pageSize"
                    @pagination="listHardwareInfoList" :autoScroll="false" />
            </div>
        </el-card>
        <el-dialog v-model="detailDialogVisible" title="查看详情" width="1200" @closed="closeDialog">
            <el-form :inline="true" :model="cellInfoForm" label-width="120px">
                <el-form-item label="序列号">
                    <el-input v-model="cellInfoForm.serialNumber" disabled style="width: 375px" />
                </el-form-item>
                <el-form-item label="资产单元编号" label-width="180px">
                    <el-input v-model="cellInfoForm.vendorUnitTypeNumber" disabled style="width: 375px" />
                </el-form-item>
                <el-form-item label="简称">
                    <el-input v-model="cellInfoForm.shortName" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="分类">
                    <el-input v-model="cellInfoForm.classification" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="厂商">
                    <el-input v-model="cellInfoForm.manufacturer" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="硬件设备">
                    <el-input v-model="cellInfoForm.hardware" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="网络类型">
                    <el-input v-model="cellInfoForm.network" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="区县">
                    <el-input v-model="cellInfoForm.county" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="UserLabel_原始">
                    <el-input v-model="cellInfoForm.userLabelOriginal" disabled style="width: 970px" />
                </el-form-item>
                <el-form-item label="UserLabel_最新">
                    <el-input v-model="cellInfoForm.userLabelLatest" disabled style="width: 970px" />
                </el-form-item>
                <el-form-item label="入网类型">
                    <el-input v-model="cellInfoForm.networkAccessType" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="上次入网日期">
                    <el-input v-model="cellInfoForm.lastNetworkAccessTime" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="上次退网日期">
                    <el-input v-model="cellInfoForm.lastNetworkExitTime" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="变更日期">
                    <el-input v-model="cellInfoForm.updateTime" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="变更次数">
                    <el-input v-model="cellInfoForm.changeTimes" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="NBId">
                    <el-input v-model="cellInfoForm.nbId" disabled style="width: 220px" />
                </el-form-item>
                <el-form-item label="历史进程">
                    <el-input v-model="cellInfoForm.history" disabled style="width: 220px" />
                    <p
                        style="background: #f6f7fa;color: #a8abb2; border: solid 1px #e5e7ee; border-radius: 5px; padding: 5px 10px">
                        {{
                            cellInfoForm.history }}
                    </p>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-model="dialogFormVisible" v-loading="loading" title="导入数据" width="1000" ref="mv"
            @opened="openDialog">
        </el-dialog>
    </div>
</template>

<script setup name="audit">

import { ref } from 'vue';

const { proxy } = getCurrentInstance();
const { nhp_network_type, nhp_county_type_short } = proxy.useDict("nhp_network_type", "nhp_county_type_short");
import { getToken } from '@/utils/auth'
import { queryHardwareInfoList } from '@/api/biz/hardware';
import { ElMessage } from 'element-plus'

const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(0)
const hardwareInfoTableData = ref([]);

const queryParams = ref({})
const detailDialogVisible = ref(false)
const cellInfoForm = ref({})
const dialogFormVisible = ref(false)

function listHardwareInfoList() {
    let param = {}
    param.county = queryParams.value.county
    param.serialNumber = queryParams.value.serialNumber
    param.pageSize = pageSize.value
    param.pageNum = currentPage.value
    queryHardwareInfoList(param).then(res => {
        hardwareInfoTableData.value = res.rows
        total.value = res.total
    })
}

function showDetailDialog(row) {
    cellInfoForm.value = row
    detailDialogVisible.value = true
}

function closeDialog() {
    cellInfoForm.value = {}
    detailDialogVisible.value = false
}

function unsetQueryForm() {
    queryParams.value = {}
}

listHardwareInfoList()

</script>

<style lang="scss" scoped></style>